<template>
	<view class="container">
		<uni-nav-bar 
			class="ch-nav" 
			height="88rpx" 
			backgroundColor="#ffffff" 
			leftWidth="90rpx" 
			rightWidth="90rpx" 
			color="#333" 
			:fixed="true" 
			:padding="false" 
			:border="true" 
			@clickLeft="goBack"
			@clickRight="$goByName('barsearch', {type: 'bar'})"
		>
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">更多球吧</text>
			<template slot="right">
				<image class="right" src="@/public/images/public/dhl_ss.png" mode="aspectFit"></image>
			</template>
		</uni-nav-bar>
		<view class="body bottom-ios">
			<BarList v-if="barList[0]" :list="barList"></BarList>
			<EmptyContent v-else top="220rpx" text="暂无更多球吧" img="qsy_zwxl" @refresh="getBarList"></EmptyContent>
			<view class="list-end flex-r mt20 mb20" v-if="isEnd && barList[0]">
				<text>已经到底啦～</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barList: [],
				pageNo: 1,
				isEnd: false
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		components: {
			BarList: () => import("./components/ch-ballbar/ch-ballbarlist.vue")
		},
		onLoad() {
			this.getBarList()
		},
		onReachBottom() {
			if(!this.isEnd){
				this.getBarList()
			}
		},
		methods: {
			getBarList() {
				this.$http.get({
					url: '/api/forum/list',
					data: {
						pageNo: this.pageNo,
						pageSize: 15
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(this.pageNo == 1){
							this.barList = data.result.records
						}else{
							this.barList.push(...data.result.records)
						}
						this.isEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
					}
				})
			},
			goBack() {
				//正常返回
				let pages = getCurrentPages()
				let len = pages.length
				if(len > 1){
					let page = pages[len - 2]
					console.log(page);
					if(page && page.userId == this.user.userId && page.refreshFollowBar){
						page.refreshFollowBar()
					}
				}
				this.$goBack(1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		margin: 20rpx 0 0;
	}
</style>
